<template>
    <a-layout class="login-box">
        <a-layout-header class="login-logo">
            <ZyLogo class="login-img" />
        </a-layout-header>
        <a-layout-content class="login-content">
            <a-row align="middle" justify="center" class="login-content-main">
                <a-col class="login-content-bgc" :pull="1">
                    <img :src="loginBg" width="380">
                    <h2>{{ setting.websiteInfo.desc || '票达人管理后台' }}</h2>
                    <p style="margin-top: 15px">✨✨✨ 欢迎使用 {{ setting.websiteInfo.name || '票达人' }}{{
                    setting.websiteInfo.version || '2.0' }}！</p>

                </a-col>

                <a-col class="login-content-form">
                    <LoginForm v-if="userLoginValue == 0" />
                    <RegisterForm v-if="userLoginValue == 1" />
                    <ForgetForm v-if="userLoginValue == 2" />

                </a-col>
            </a-row>
        </a-layout-content>
    </a-layout>
</template>

<script setup>
import { reactive, ref, computed, toRefs,onMounted } from 'vue';
// import loginBg from './components/login-bg.png';
import loginBg from '@/assets/login-bgc.png';

import LoginForm from "./components/LoginForm.vue";
import RegisterForm from "./components/RegisterForm.vue";
import ForgetForm from "./components/ForgetForm.vue";

import ZyLogo from "./components/logo.vue";
import setting from "./components/setting.js";
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const userStore = useUserStore()
const { userLoginValue } = storeToRefs(userStore)

onMounted(()=>{
    userLoginValue.value = route.query.type || 0
})
</script>

<style lang="less" scoped>
.login-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    background-image: url('@/assets/background.svg');

    .login-logo,
    .login-footer {
        color: #444343;
        background-color: #ffffff;


    }

    .margin-top50 {
        margin-top: 40px;
    }

    .login-content {
        height: 100%;

        .login-content-main {
            height: 100%;

            .login-content-bgc {
                text-align: center;
                padding-bottom: 50px;
            }

            .login-content-form {
                border: 1px solid #e3e3e3;
                padding: 60px;
                border-radius: 8px;
                overflow: hidden;
                box-sizing: border-box;

                .login-title {
                    margin-bottom: 30px;
                }

                .login-form {
                    max-width: 400px;
                    background-color: #fff;
                    overflow: hidden;

                    .login-form-button {
                        margin-right: 15px;
                    }
                }
            }
        }
    }

    .login-footer {
        text-align: center;
        font-size: .8rem;
        color: #828181;
        margin-top: 100px;
    }
}
</style>
